
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>测试highchart</title>
    <script src="${pageContext.request.contextPath}/page/js/jquery.min.js"></script>
    <script src="${pageContext.request.contextPath}/highchart/code/highcharts.js"></script>
    <script src="${pageContext.request.contextPath}/highchart/code/highcharts-3d.js"></script>
    <script src="${pageContext.request.contextPath}/highchart/code/modules/exporting.js"></script>
    <script src="${pageContext.request.contextPath}/highchart/code/modules/export-data.js"></script>
    <script src="${pageContext.request.contextPath}/highchart/code/modules/accessibility.js"></script>
</head>
<body>
<div id="container"></div>
<a href="javascript:test1();">点击改变比例</a>
</body>
<script>
    var json={};
    var chart={
        type: 'pie',
        options3d: {
            enabled: true,//3d效果
            alpha: 45,
            beta: 0
        }
    }
    var title={
        text: '科一试题统计'
    }
    var accessibility={
        point: {
            valueSuffix: '%'
        }
    }
    var tooltip={
        pointFormat: '{series.name}: <b>{point.percentage:.1f}%</b>'
    }
    var plotOptions={
        pie: {
            allowPointSelect: true,
            cursor: 'pointer',
            depth: 35,
            dataLabels: {
                enabled: true,
                format: '{point.name}'
            }
        }
    }
    var series=[{
        type: 'pie',
        name: '科一试题统计',
        data: [
            {
                name: '做对',
                y: 10,
                sliced: true,
                selected: true
            },
            ['做错', 5],
            ['未做', 85],
        ]
    }]
    json.chart = chart;
    json.title = title;
    json.tooltip = tooltip;
    json.series = series;
    json.plotOptions = plotOptions;
    json.accessibility=accessibility;

    $('#container').highcharts(json);

    function test1(){

        var right={};
        var error={};
        var untest={};

        right.name="做对";
        right.y=20;
        right.sliced=true;
        right.selected=true;

        error.name="做对";
        error.y=5;

        untest.name="做对";
        untest.y=100-right.y-error.y;

        var data_tool=[];
        data_tool.push(right);
        data_tool.push(error);
        data_tool.push(untest);

        json.series=[{
            type: 'pie',
            name: '科一试题统计',
            data: data_tool
        }]

        $('#container').highcharts(json);
    }








    // Highcharts.chart('container', {
    //     chart: {
    //         type: 'pie',
    //         options3d: {
    //             enabled: true,
    //             alpha: 45,
    //             beta: 0
    //         }
    //     },
    //     title: {
    //         text: '科一试题统计'
    //     },
    //     accessibility: {
    //         point: {
    //             valueSuffix: '%'
    //         }
    //     },
    //     tooltip: {
    //         pointFormat: '{series.name}: <b>{point.percentage:.1f}%</b>'
    //     },
    //     plotOptions: {
    //         pie: {
    //             allowPointSelect: true,
    //             cursor: 'pointer',
    //             depth: 35,
    //             dataLabels: {
    //                 enabled: true,
    //                 format: '{point.name}'
    //             }
    //         }
    //     },
    //     series: [{
    //         type: 'pie',
    //         name: 'Browser share',
    //         data: [
    //             ['Firefox', 45.0],
    //             ['IE', 26.8],
    //             {
    //                 name: 'Chrome',
    //                 y: 12.8,
    //                 sliced: true,
    //                 selected: true
    //             },
    //             ['Safari', 8.5],
    //             ['Opera', 6.2],
    //             ['Others', 0.7]
    //         ]
    //     }]
    // });
</script>
</html>
